<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像图层</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="./minemap.js"></script>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    minemap.domainUrl = '//minedata.cn';
    minemap.dataDomainUrl = '//datahive.minedata.cn';
    minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
    minemap.serviceUrl = '//minedata.cn/service';
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 2365;
    var map = new minemap.Map({
        container: 'map',
        style: "//minedata.cn/service/solu/style/id/5",
        center: [116.4357714405884, 39.959648358670002],
        zoom: 15,
        pitch: 60
    });

    map.repaint = true;


    var center = [116.4357714405884, 39.959648358670002];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "14", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43870356507193, 39.949429396385241];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "15", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43388835074822, 39.950227048125129];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "16", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.48042001835842, 39.95519167645293];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "17", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.40248575320902, 39.94887523295506];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "18", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.42162599673088, 39.97690000191332];
    var radius = 0.01;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "19", type: 6,"zoom":9}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    console.log('---------------------1-------------------');

    //--------------------------------------------------//
    var center = [116.4357714405884, 39.959648358670002];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "20", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43870356507193, 39.949429396385241];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "21", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43388835074822, 39.950227048125129];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "22", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.48042001835842, 39.95519167645293];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "23", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.40248575320902, 39.94887523295506];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "24", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.42162599673088, 39.97690000191332];
    var radius = 0.005;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "25", type: 6,"zoom":12}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    console.log('---------------------2-------------------');
    //--------------------------------------------------//
    var center = [116.4357714405884, 39.959648358670002];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "26", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43870356507193, 39.949429396385241];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "27", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.43388835074822, 39.950227048125129];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "28", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.48042001835842, 39.95519167645293];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "29", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.40248575320902, 39.94887523295506];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "30", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));

    var center = [116.42162599673088, 39.97690000191332];
    var radius = 0.002;
    var options = {steps: 4, units: 'kilometers', properties: {foo: '我是远景柱子', id: "31", type: 6,"zoom":15}};
    var circle = turf.circle(center, radius, options);
    console.log(JSON.stringify(circle));



    map.on("load", function () {
        for (var i = 0; i < 10; i++) {
            map.addSource("overlay" + i, {
                "type": "image",
                "url": "texture/giftest/" + (i + 1) + ".png",
                "coordinates": [
                    [116.4357714405884, 39.96864156230725], [116.42403857772041, 39.959647767287436], [116.4357714405884, 39.95065515503276], [116.44750430345641, 39.959647767287436]
                ]
            });
            map.addLayer({
                "id": "imageLayer" + i,
                "type": "raster",
                "source": "overlay" + i,
                "minzoom": 10,
                "maxzoom": 17,
                "layout": {
                    "visibility": "visible"
                },
                "paint": {
                    "raster-opacity": 0.85,
                    "render-carousel": true,
                    "raster-seq": i,
                    "raster-total-img": 10
                }
            })
        }
    })

</script>
</body>
